<template>
<div class="m-0 p-0 app" >
    <header class="container pt-3">
    <nav class="container-xxl row justify-content-around p-0 m-0" style="height: 30px;">
      <router-link class="home col-4 text-decoration-none fs-4" to="/" style="color: #93d2f3;"><img src="./assets/logo.jpg" height="50" width="60" style=" border-radius: 50%;">  衣帽间</router-link>

      <div class="col-4 ms-5">
        <input type="search" v-model="searchgoods" placeholder="请输入需要商品">
        <router-link :to="seachadress+searchgoods" v-show="searchgoods"><button>搜索</button></router-link>
      </div>
      
      <template v-if="isLogin">
        <div class="col text-end">
          <span @click="userinfo(username)" style="cursor:pointer">欢迎您，{{username}}</span>
          <router-link to="/cart" ><button>我的购物车</button></router-link>
          <router-link to="/order" ><button>我的订单</button></router-link>
          <button @click="loginOut" style="margin: 0;margin-left: 10px;">注销</button>
        </div>
      </template>

      <template v-else>
        <div class="col text-end">
          <router-link to="/login" ><button>登录</button></router-link>
          <router-link to="/signin" ><button>注册</button></router-link>
        </div>
        
      </template>
    </nav>

  </header>
</div>

  <router-view/>

</template>
<script>
// 199000907冯祺
export default {
  data(){
    return{
      searchgoods:'',
      isseach:false,
      seachadress:"/seach/"
    }
  },
  methods: {
    userinfo(x){
      this.$router.push({
        name:"user",
        params:{
          id:x
        }
      })
    },
    loginOut(){
      this.$store.commit("loginOut")
      window.sessionStorage.removeItem('userInfo')
      this.$router.push('/')
    }
  },
  computed: {
    username(){
      return this.$store.state.userInfo.username
    },
    isLogin(){
      return this.$store.state.userInfo.isLogin
    }
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
    color: gray;
  }
  .app{
    background-image: url(./assets/bg.jpg);
  }
  header{
    height: 70px;
    
  }
  header input{
    width: 300px;
    height: 40px;
    border: 2px solid #93d2f3;
    padding-left: 20px;
    text-align: center;
    border-radius: 5px;
  }
  header input:focus{
    outline: 0;
    border: 2px solid gray;
  }
  header button{
    height: 40px;
    padding: 5px;
    margin-left: 5px;
    border-radius: 5px;
    background-color: white;
    border: 2px solid #93d2f3;
  }
  header button:hover{
    background-color: #93d2f3;
    color: white;
  }
</style>
